<template>
  <a-layout :class="['admin-layout', 'beauty-scroll']">
    <drawer v-if="isMobile" v-model="drawerOpen">
      <side-menu
        :theme="theme.mode"
        :menuData="menuData"
        :collapsed="false"
        :collapsible="false"
        @menuSelect="onMenuSelect"
      />
    </drawer>
    <side-menu
      :class="[fixedSideBar ? 'fixed-side' : '']"
      :theme="theme.mode"
      v-else-if="layout === 'side' || layout === 'mix'"
      width="2.56rem"
      collapsedWidth="0.8rem"
      :menuData="sideMenuData"
      :collapsed="collapsed"
      :collapsible="true"
    />
    <div
      v-if="fixedSideBar && !isMobile"
      :style="`width: ${sideMenuWidth}; min-width: ${sideMenuWidth};max-width: ${sideMenuWidth};`"
      class="virtual-side"
    ></div>
    <drawer v-model="visible" placement="right">
      <setting />
    </drawer>
    <a-layout class="admin-layout-main beauty-scroll">
      <admin-header
        :class="[
          {
            'fixed-tabs': fixedTabs,
            'fixed-header': fixedHeader,
            'multi-page': multiPage,
          },
        ]"
        :style="headerStyle"
        :menuData="headMenuData"
        :collapsed="collapsed"
        @toggleCollapse="toggleCollapse"
      />
      <a-layout-header
        :class="[
          'virtual-header',
          {
            'fixed-tabs': fixedTabs,
            'fixed-header': fixedHeader,
            'multi-page': multiPage,
          },
        ]"
        v-show="fixedHeader"
      ></a-layout-header>
      <a-layout-content
        class="admin-layout-content"
        :style="`min-height: ${minHeight}px;`"
      >
        <div style="position: relative">
          <slot></slot>
        </div>
      </a-layout-content>
      <!-- <a-layout-footer style="padding: 0">
        <page-footer :link-list="footerLinks" :copyright="copyright" />
      </a-layout-footer> -->
    </a-layout>
  </a-layout>
</template>

<script>
  import AdminHeader from './header/AdminHeader'
  import Drawer from '../components/tool/Drawer'
  import SideMenu from '../components/menu/SideMenu'
  import Setting from '../components/setting/Setting'
  import { mapState, mapMutations, mapGetters } from 'vuex'
  import { setRem } from '@/utils/rem'

  // const minHeight = window.innerHeight - 64 - 122

  export default {
    name: 'AdminLayout',
    components: { Setting, SideMenu, Drawer, AdminHeader },
    data() {
      return {
        minHeight: window.innerHeight - 66,
        collapsed: false,
        visible: false,
        drawerOpen: false,
        timer: false,
      }
    },
    provide() {
      return {
        adminLayout: this,
      }
    },
    watch: {
      $route(val) {
        this.setActivated(val)
      },
      layout() {
        this.setActivated(this.$route)
      },
      isMobile(val) {
        if (!val) {
          this.drawerOpen = false
        }
      },
      showSetDrawer(val) {
        this.visible = val
      },
      visible(val) {
        this.toggleShowSetDrawer(val)
      },
    },
    computed: {
      ...mapState('setting', [
        'isMobile',
        'showSetDrawer',
        'theme',
        'layout',
        'footerLinks',
        'copyright',
        'fixedHeader',
        'fixedSideBar',
        'fixedTabs',
        'hideSetting',
        'multiPage',
      ]),
      ...mapGetters('setting', ['firstMenu', 'subMenu', 'menuData']),
      sideMenuWidth() {
        return this.collapsed ? '80px' : '256px'
      },
      headerStyle() {
        let width =
          this.fixedHeader && this.layout !== 'head' && !this.isMobile
            ? `calc(100% - ${this.sideMenuWidth})`
            : '100%'
        let position = this.fixedHeader ? 'fixed' : 'static'
        return `width: ${width}; position: ${position};`
      },
      headMenuData() {
        const { layout, menuData, firstMenu } = this
        return layout === 'mix' ? firstMenu : menuData
      },
      sideMenuData() {
        const { layout, menuData, subMenu } = this
        return layout === 'mix' ? subMenu : menuData
      },
    },
    methods: {
      ...mapMutations('setting', [
        'setShowSetDrawer',
        'correctPageMinHeight',
        'setPageMinHeight',
        'setActivatedFirst',
      ]),
      toggleCollapse() {
        this.collapsed = !this.collapsed
      },
      onMenuSelect() {
        this.toggleCollapse()
      },
      setActivated(route) {
        if (this.layout === 'mix') {
          let matched = route.matched
          matched = matched.slice(0, matched.length - 1)
          const { firstMenu } = this
          for (let menu of firstMenu) {
            if (
              matched.findIndex((item) => item.path === menu.fullPath) !== -1
            ) {
              this.setActivatedFirst(menu.fullPath)
              break
            }
          }
        }
      },
      toggleShowSetDrawer(val) {
        this.setShowSetDrawer(val)
      },
    },
    created() {
      this.correctPageMinHeight(this.minHeight - 24)
      this.setActivated(this.$route)
      window.onresize = () => {
        setRem()

        return (() => {
          this.minHeight = window.innerHeight - 66 - 164
          this.setPageMinHeight(this.minHeight)
        })()
      }
    },
    beforeDestroy() {
      window.onresize = null
      //todo
      this.setPageMinHeight(-154)
    },
  }
</script>

<style lang="less" scoped>
  .admin-layout {
    .side-menu {
      &.fixed-side {
        position: fixed;
        top: 0;
        left: 0;
        height: 100vh;
        border-top-right-radius: 1.5em;
        border-bottom-right-radius: 1.5em;
      }
    }
    .virtual-side {
      height: 90vh;
      background-color: #020b07;
      transition: all 0.2s;
    }
    .virtual-header {
      opacity: 0;
      transition: all 0.2s;
      &.fixed-tabs.multi-page:not(.fixed-header) {
        height: 0;
      }
    }
    .admin-layout-main {
      .admin-header {
        top: 0;
        right: 0;
        overflow: hidden;
        transition: all 0.2s;
        &.fixed-tabs.multi-page:not(.fixed-header) {
          height: 0;
        }
      }
    }
    .admin-layout-content {
      padding: 24px 12px 0;

      /* overflow-x: hidden; */

      /* min-height: calc(100vh - 64px - 122px); */
    }
    .setting {
      width: 40px;
      height: 40px;
      font-size: 22px;
      line-height: 40px;
      color: @base-bg-color;
      background-color: @primary-color;
      border-radius: 5px 0 0 5px;
      box-shadow: -2px 0 8px @shadow-color;
    }
  }
</style>
